<template>
  <div class="app-container">
    <el-form :model="queryParams" :ref="queryFormRef" :inline="true" v-show="showSearch" label-width="100px" @keyup.enter.native="handleQuery">
      <el-form-item label="模块标题" prop="titleKey">
        <el-input v-model="queryParams.titleKey" placeholder="请输入关键字" clearable />
      </el-form-item>
      <el-form-item label="操作描述" prop="operKey">
        <el-input v-model="queryParams.operKey" placeholder="请输入关键字" clearable />
      </el-form-item>
      <el-form-item label="业务类型" prop="businessType">
        <lam-dict-select v-model="queryParams.businessType" dictCode="business_type" placeholder="业务类型" clearable />
      </el-form-item>
      <el-form-item label="操作类别" prop="operatorType">
        <lam-dict-select v-model="queryParams.operatorType" dictCode="operator_type" placeholder="操作类别" clearable />
      </el-form-item>
      <!-- <el-form-item label="方法名称" prop="handlerKey">
        <el-input v-model="queryParams.handlerKey" placeholder="请输入关键字" clearable />
      </el-form-item> -->
      <el-form-item label="请求ip" prop="reqIp">
        <el-input v-model="queryParams.reqIp" placeholder="请求ip" clearable />
      </el-form-item>
      <el-form-item label="操作状态" prop="reqStatus">
        <lam-dict-select v-model="queryParams.reqStatus" dictCode="req_status_type" placeholder="操作状态" clearable />
      </el-form-item>
      <el-form-item label="请求耗时" prop="elTimeBegin">
        <el-input v-model="queryParams.elTimeBegin" placeholder="开始" clearable style="width:90px;"/>
        -
      </el-form-item>
      <el-form-item prop="elTimeEnd">
        <el-input v-model="queryParams.elTimeEnd" placeholder="结束" clearable style="width:91px;"/>
      </el-form-item>
      <el-form-item label="操作时间" prop="operTimeBegin">
        <el-date-picker clearable v-model="queryParams.operTimeBegin" value-format="yyyy-MM-dd" type="date" placeholder="开始时间" style="width:140px;"/>
        -
        <el-date-picker clearable v-model="queryParams.operTimeEnd" value-format="yyyy-MM-dd" type="date" placehodelr="结束时间" style="width:140px;"/>
      </el-form-item>
      <el-form-item label="操作人员" prop="operNameKey">
        <el-input v-model="queryParams.operNameKey" placeholder="请输入关键字" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮区域 -->
    <div class="tool-bar-btn">
      <el-button type="success" icon="el-icon-tickets"  :disabled="single" @click="handleDetail">详情</el-button>
      <el-button type="danger" icon="el-icon-delete"  :disabled="multiple" @click="handleDelete" v-hasPerms="['monitor:operLog:remove']">删除</el-button>
      <el-button type="warning" icon="el-icon-download"  @click="handleExport" v-hasPerms="['monitor:operLog:export']" >导出</el-button>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </div>
    <selected-info :count="selectedRows.length" :onClearSelected="onClearSelected" />
    <el-table :ref="dataTableRef" v-loading="loading" :data="dataList" stripe border @selection-change="onSelectChange" style="width: 100%"
             :default-sort = "defaultSort" @sort-change="onSortChange" :row-key="rowKey" >
      <el-table-column type="selection" width="55" align="center" fixed="left"/>
      <el-table-column label="序号" align="center" prop="id" sortable="custom" width="80" />
      <el-table-column label="模块标题" align="center" prop="title" width="150"/>
      <el-table-column label="操作描述" align="center" prop="oper" width="180"/>
      <el-table-column label="业务类型" align="center" prop="businessTypeDictText" width="150">
        <template slot-scope="{ row }">
          <OperBusiness :value="row.businessType" :text="row.businessTypeDictText"/>
        </template>
      </el-table-column>
      <el-table-column label="操作类别" align="center" prop="operatorTypeDictText" width="120"/>
      <el-table-column label="请求URL" align="left" header-align="center" prop="reqUrl" width="250"/>
      <el-table-column label="请求方式" align="center" prop="reqMethod" width="120"/>
      <el-table-column label="操作状态" align="center" prop="reqStatusDictText" width="100">
        <template slot-scope="{ row }">
          <OperLogResStatus :value="row.reqStatus" :text="row.reqStatusDictText" />
        </template>
      </el-table-column>
      <el-table-column label="操作描述" align="center" prop="reqDesc" width="200"/>
      <el-table-column label="请求耗时" align="center" prop="elTimeText" width="150"/>
      <el-table-column label="操作时间" align="center" prop="operTime" sortable="custom" width="180"/>
      <el-table-column label="操作人员" align="center" prop="operName" width="100"/>
      <el-table-column label="请求ip" align="center" prop="reqIp" width="120"/>
      <el-table-column label="浏览器类型" align="center" prop="browser" width="120"/>
      <el-table-column label="操作系统" align="center" prop="os" width="120"/>
      <el-table-column label="操作" align="center" fixed="right" class-name="small-padding fixed-width" width="140">
        <template slot-scope="{row}">
          <el-button type="text" icon="el-icon-tickets" @click="handleDetail(row)" >详情</el-button>
          <el-button type="text" icon="el-icon-delete" @click="handleDelete(row)" v-hasPerms="['monitor:operLog:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="!loading" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"  @pagination="getList" />

    <!-- 添加或修改对话框 -->
    <EditSysOperLog ref="formDialog" @ok="getList" />
	<!-- 导出对话框 -->
	<ToExport ref="exportDialog" />

  </div>
</template>

<script>
import {httpGet, httpDel} from '@/api';
import { IndexListMixin } from '@/components/mixins/IndexListMixin';
import ToExport from '@/components/download/ToExport';
import EditSysOperLog from './edit';
import OperBusiness from './OperBusiness';
import OperLogResStatus from './OperLogResStatus';

export default {
  name: "OperLogList",
  mixins:[IndexListMixin],
  components: {
    ToExport,
    EditSysOperLog,
    OperLogResStatus,
    OperBusiness
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        title: null,
        oper: null,
        businessType: null,
        operatorType: null,
        handler: null,
        reqUrl: null,
        reqIp: null,
        reqParam: null,
        reqStatus: null,
        reqDesc: null,
        elTimeBegin: null,
        elTimeEnd: null,
        operTimeBegin: null,
        operTimeEnd: null,
        operName: null,
        pageNum: 1,
        pageSize: 10
      },
      url: {
      	exportXls: '/monitor/operLog/export',
        base: '/monitor/operLog/',
      	list: '/monitor/operLog/list'
      }
    };
  },
  created() {
    this.getList();
  },
  mounted(){
  },
  methods: {
    getList() {
      this.loadData(this.url.list);
    },

    /** 查看详情按钮操作 */
    handleDetail(row) {
      const id = row.id || this.selectedRowKeys
      this.$refs.formDialog.toDetail("查看操作日志详情", httpGet(this.url.base + id));
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      this.deleteData(this.url.base, row.id);
    },

    /** 导出按钮操作 */
    handleExport() {
      this.exportData('操作日志导出', this.url.exportXls, this.queryParams);
    }

  }
};
</script>
